<template>
  <div id="app">
    <!-- 路由视图 -->
    <router-view></router-view>
    <!-- vant中的Tabbar -->
    <van-tabbar v-model="active" v-show="$store.state.loginPage">
      <van-tabbar-item to="/" icon="home-o" >
        <span>首页</span>
      </van-tabbar-item  >
      <van-tabbar-item to="/order" icon="search">
        <span>发现</span> 
      </van-tabbar-item>
      <van-tabbar-item to="/find" icon="orders-o">
        <span>订单</span>
      </van-tabbar-item>
	  <van-tabbar-item to="/me" icon="user-o">
	    <span>我的</span>
	  </van-tabbar-item>
    </van-tabbar>

  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0
    }
  },
  methods:{
	  initAdd(){
        navigator.geolocation.getCurrentPosition((pos)=>{
			
			var coords = { lat: pos.coords.latitude, lng:pos.coords.longitude}
			this.$store.dispatch("getLocationInfoByLngLat",coords)
				.then(res =>{
					this.$store.state.locationName= res.data.address
					this.$store.state.position ={lat: pos.coords.latitude, lng:pos.coords.longitude} ,
					//定位信息准备好了
					this.$store.state.locationReady=true
				})

        },function(){
            console.log("获取位置失败");
        },{
            // 配置对象
            timeout: 10000
        });
	  }
  },created() {
  	this.initAdd()
  },
  watch: {
    $route(newV){
      switch (newV.fullPath) {
        case "/":
          this.active = 0;
		  this.$store.commit("loginPage",{loginPage:true});
          break;
        case "/category":
          this.active = 1;
		  this.$store.commit("loginPage",{loginPage:true});
          break;
        case "/setting":
          this.active = 2;
		  this.$store.commit("loginPage",{loginPage:true});
          break;
		  case "/me":
		    this.active = 4;
			this.$store.commit("loginPage",{loginPage:true});
			
		    break;
			case "/me/login":
			  this.active = 4;
			this.$store.commit("loginPage",{loginPage:false});
			  break;
        default:
          break;
      }
	  
    }
  }
}
</script>

<style>
  *{
    box-sizing: border-box;
  }
  body{
    margin: 0;
  }
  .first-page-root{
    height: calc(100vh - 50px);
    background-color: #eee;
    overflow-y: scroll;
  }
  
  
  
  
  .pagein-enter{
    left: 100%;
  }
  .pagein-enter-active,.pagein-leave-active{
    position: absolute;
    top: 0;
    width: 100%;
    overflow: hidden;
    transition: all 0.7s;
  }
  .pagein-enter-to{
    left: 0%;
  }
  .pagein-leave{
    left: 0%;
  }
  .pagein-leave-to{
    left: -40%;
  }
  /*  */
  .pageout-enter{
    left: -40%;
  }
  .pageout-enter-to{
    left: 0%;
  }
  .pageout-enter-active,.pageout-leave-active{
    position:absolute;
    transition: all 0.7;
    width: 100%;
    overflow: hidden;
    top: 0;
  }
  .pageout.pagein-enter-active,.pageout-leave-active{
    z-index: 1000;
  }
  .pageout-leave{
    left: 0%;
  }
  .pageout-leave-to{
    left: 100%;
  }
</style>
